<template>
  <el-card class="box-card" shadow="never">
    <div class="tree_box">
      <el-tree ref="tree" :data="data" show-checkbox check-on-click-node node-key="id" :default-checked-keys="[3]" :props="defaultProps"></el-tree>
      <el-button type="primary" size="small" @click="getCheckedKeys">主要按钮</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '首页'
      }, {
        id: 2,
        label: '关于',
        children: [
          {
            id: 5,
            label: '关于'
          }
        ]
      }, {
        id: 3,
        label: '表格分页'
      }, {
        id: 4,
        label: '权限树'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    getCheckedKeys () {
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      console.log(checkedKeys);
      if (checkedKeys.length !== 0) {
        this.$message({
          message: '编辑成功',
          type: 'success'
        });
      } else {
        this.$message('请选择要勾选的节点');
      }
    }
  }
};
</script>
